<template>
	<view class="big-box">
		<view class="steps">
			<u-steps current="1" activeColor="#0000ff">
				<navigator url="../step1/step1"><u-steps-item title="手机号注册"></u-steps-item></navigator>
				<u-steps-item title="编辑信息"></u-steps-item>
				<u-steps-item title="再次登录"></u-steps-item>
			</u-steps>
		</view>
		<u--form labelPosition="left" :model="model1" :rules="rules" ref="form1" class="form">
			<u-form-item label="头像" prop="userInfo.tx" borderBottom ref="item1">
				<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple :maxCount="1" :previewFullImage="true" class="upload"></u-upload>
			</u-form-item>
			<u-form-item label="昵称" prop="userInfo.name" borderBottom ref="item1">
				<u--input v-model="model1.userInfo.name" border="none" placeholder="请输入昵称"></u--input>
			</u-form-item>
			<u-form-item
				label="性别"
				prop="userInfo.sex"
				borderBottom
				@click="
					showSex = true;
					hideKeyboard();
				"
				ref="item1"
			>
				<u--input v-model="model1.userInfo.sex" disabled disabledColor="#ffffff" placeholder="请选择性别" border="none"></u--input>
				<u-icon slot="right" name="arrow-right"></u-icon>
			</u-form-item>
			<u-form-item label="用户学号" prop="userInfo.studnet_code" borderBottom ref="item1">
				<u--input v-model="model1.userInfo.studnet_code" border="none" placeholder="请输入用户学号"></u--input>
			</u-form-item>
			<u-form-item label="真实姓名" prop="userInfo.really_name" borderBottom ref="item1">
				<u--input v-model="model1.userInfo.really_name" border="none" placeholder="请输入用户真实姓名"></u--input>
			</u-form-item>
			<u-form-item label="所在班级" prop="userInfo.classx" borderBottom ref="item1">
				<u--input v-model="model1.userInfo.classx" border="none" placeholder="请输入所在班级"></u--input>
			</u-form-item>
			<u-form-item label="联系电话" prop="userInfo.mobile" borderBottom ref="item1">
				<u--input v-model="model1.userInfo.mobile" border="none" placeholder="请输入联系电话"></u--input>
			</u-form-item>
		</u--form>
		<u-action-sheet :show="showSex" :actions="actions" title="请选择性别" description="如果选择保密会报错" @close="showSex = false" @select="sexSelect"></u-action-sheet>
		<u-button @click="submit" class="but">提交信息</u-button>
	</view>
</template>

<script>
export default {
	data() {
		return {
			fileList1: [],
			showSex: false,
			model1: {
				userInfo: {
					name: '',
					sex: ''
				}
			},
			actions: [
				{
					name: '男'
				},
				{
					name: '女'
				},
				{
					name: '保密'
				}
			],
			rules: {
				'userInfo.name': {
					type: 'string',
					required: true,
					message: '请填写您的用户昵称',
					trigger: ['blur', 'change']
				},
				'userInfo.sex': {
					type: 'string',
					max: 1,
					required: true,
					message: '请选择男或女',
					trigger: ['blur', 'change']
				},

				'userInfo.studnet_code': {
					type: 'string',
					required: true,
					message: '请填写您的学号',
					trigger: ['blur', 'change']
				},
				'userInfo.really_name': {
					type: 'string',
					required: true,
					message: '请填写您的真实姓名',
					trigger: ['blur', 'change']
				},
				'userInfo.classx': {
					type: 'string',
					required: true,
					message: '请填写您所在的班级',
					trigger: ['blur', 'change']
				},
				'userInfo.mobile': {
					type: 'string',
					required: true,
					message: '请填写您的联系方式',
					trigger: ['blur', 'change']
				}
			},
			radio: '',
			switchVal: false,
			userInfo:{
				userName:'',
				sex:'',
				reallyName:'',
				stuCode:'',
				classx:'',
				
			},
			userId:''
		};
	},
	onReady() {},
	onLoad(params) {
		console.log(params.userid);
		this.userId = params.userid
	},
	methods: {
		submit(){
			// console.log(this.actions);
			
			// console.log(userList);
			// this.userInfo={
			// 	classx:userList.classx,
			// 	studentCode:userList.studnet_code,
			// 	reallyName:userList.really_name,
			// 	sex:'男',
			// 	userName:userList.name,
			// 	userId:this.userId
			// }
			console.log(this.userInfo);
			let userList = this.model1.userInfo
			uni.$u.http
				.post('/app/saveUserInfo',{
					classx:this.model1.userInfo.classx,
					studentCode:this.model1.userInfo.studnet_code,
					reallyName:this.model1.userInfo.really_name,
					sex:1,
					userName:this.model1.userInfo.name,
					userId:this.userId
				} )
				.then(res => {
					
				})
				.catch(err => {});
				
				uni.navigateTo({
					url: '../login/login'
				});
		},
		sexSelect(e) {
			this.model1.userInfo.sex = e.name;
			this.$refs.form1.validateField('userInfo.sex');
		},
		// 删除图片
		deletePic(event) {
			this[`fileList${event.name}`].splice(event.index, 1);
		},
		// 新增图片
		async afterRead(event) {
			// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
			let lists = [].concat(event.file);
			let fileListLen = this[`fileList${event.name}`].length;
			lists.map(item => {
				this[`fileList${event.name}`].push({
					...item,
					status: 'uploading',
					message: '上传中'
				});
			});
			for (let i = 0; i < lists.length; i++) {
				const result = await this.uploadFilePromise(lists[i].url);
				let item = this[`fileList${event.name}`][fileListLen];
				this[`fileList${event.name}`].splice(
					fileListLen,
					1,
					Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					})
				);
				fileListLen++;
			}
		},
		uploadFilePromise(url) {
			return new Promise((resolve, reject) => {
				let a = uni.uploadFile({
					url: 'http://192.168.2.21:7001/upload', // 仅为示例，非真实的接口地址
					filePath: url,
					name: 'file',
					formData: {
						user: 'test'
					},
					success: res => {
						setTimeout(() => {
							resolve(res.data.data);
						}, 1000);
					}
				});
			});
		}
	}
};
</script>

<style>
.big-box {
	padding: 0 50upx;
	padding-top: 30px;
}
.form {
	margin-top: 40px;
	padding: 10px;
}
.steps {
	padding-left: 20px;
	padding-right: 20px;
	width: 320px;
}
.but {
	margin-top: 10px;
	margin-bottom: 30px;
}
</style>
